<template>
  <!-- 筛选条件  -->
  <div class="DamageRegistrationBox">
    <div class="time" @click="show = true">
      <van-row>
        <van-col span="12">
          <div class="filstItem">
            <p>
              {{ params.makeTimeStart ? params.makeTimeStart : "发货时间起" }}
            </p>
            <img src="@/assets/rili.png" alt="图片" />
          </div>
        </van-col>
        <van-col span="12">
          <div class="timeItem">
            <p>{{ params.makeTimeEnd ? params.makeTimeEnd : "发货时间止" }}</p>
            <img src="@/assets/rili.png" alt="图片" />
          </div>
        </van-col>
      </van-row>
    </div>
    <!-- {输入框  -->
    <ul class="input">
      <li>
        <p>主 单 号：</p>
        <input
          type="text"
          v-model="params.masterWaybillId"
          placeholder="请输入主单号"
        />
      </li>
      <li>
        <p>分 单 号：</p>
        <input
          type="text"
          v-model="params.subWaybillId"
          placeholder="请输入分单号"
        />
      </li>
      <li>
        <p>操 作 人：</p>
        <input
          type="text"
          v-model="params.operator"
          placeholder="请输入操作人"
        />
      </li>
    </ul>
    <!-- 按钮 -->
    <div class="button">
      <van-row gutter="10">
        <van-col span="12">
          <van-button block round @click="changeParams" class="buttonItem1"
            >查询</van-button
          >
        </van-col>
        <van-col span="12">
          <van-button block round @click="resetParams" class="buttonItem2"
            >重置</van-button
          >
        </van-col>
      </van-row>
    </div>
    <!-- 日历 -->
    <van-calendar
      v-model="show"
      color="#F29D12"
      type="range"
      :min-date="minDate"
      :max-date="maxDate"
      @confirm="onConfirm"
    />
  </div>
</template>

<script>
import Vue from "vue";
import { Button, Calendar } from "vant";
import { dateFormat } from "@/utils/common";

Vue.use(Calendar);
Vue.use(Button);
export default {
  data() {
    return {
      show: false,
      params: {
        masterWaybillId: "",
        subWaybillId: "",
        operator: "",
        makeTimeStart: "",
        makeTimeEnd: "",
      },
      minDate: new Date(new Date().setFullYear(new Date().getFullYear() - 1)),
      maxDate: new Date(),
    };
  },
  methods: {
    // 日期选定
    onConfirm(e) {
      console.log(e);
      this.params = {
        ...this.params,
        makeTimeStart: `${dateFormat("YYYY-mm-dd", e[0])} 00:00:00`,
        makeTimeEnd: `${dateFormat("YYYY-mm-dd", e[1])} 23:59:59`,
      };
      this.show = false;
    },
    // 重置
    resetParams() {
      this.params = {
        masterWaybillId: "",
        subWaybillId: "",
        operator: "",
        makeTimeStart: "",
        makeTimeEnd: "",
        pageNum: 1,
        pageSize: 20,
      };
    },
    // 调用父元素改变参数
    changeParams() {
      this.$emit("changeParams", this.params);
    },
  },
};
</script>

<style lang="scss" scoped>
.DamageRegistrationBox {
  width: 100%;
  background-color: #fff;
  margin-bottom: 10px;

  .time {
    padding: 0 15px;
    box-sizing: border-box;
    border-bottom: 2px solid rgba(172, 172, 172, 0.5);

    .timeItem {
      display: flex;
      justify-content: center;
      padding: 15px 0;
      & > p {
        font-size: 15px;
        color: #4c4c4c;
        line-height: 20px;
        margin: 0;
      }

      & > img {
        width: 15px;
        height: 15px;
        margin-left: 2px;
        margin-top: 2px;
        display: block;
      }
    }

    .filstItem {
      display: flex;
      justify-content: center;
      border-right: 2px solid rgba(172, 172, 172, 0.5);
      padding: 15px 0;

      & > p {
        font-size: 16px;
        color: #4c4c4c;
        line-height: 20px;
        margin: 0;
      }

      & > img {
        width: 15px;
        height: 15px;
        margin-left: 2px;
        margin-top: 2px;
        display: block;
      }
    }
  }

  .input {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
    padding: 10px 15px;
    box-sizing: border-box;

    li {
      display: flex;
      margin-bottom: 10px;

      p {
        width: 75px;
        font-size: 16px;
        font-weight: 400;
        color: #999999;
        line-height: 30px;
        margin: 0;
      }

      input {
        flex: 1;
        height: 30px;
        background: rgba(233, 236, 239, 0.5);
        border-radius: 18px;
        outline: none;
        border: none;
        box-sizing: border-box;
        padding: 0 10px;
        line-height: 30px;
        font-size: 16px;
        color: #79828a;
      }
    }
  }

  .button {
    width: 100%;
    padding: 0 15px 15px 85px;
    box-sizing: border-box;

    .buttonItem1 {
      height: 35px;
      background: #f29d12;
      border-radius: 18px;
      line-height: 35px;
      color: #fff;
      font-size: 16px;
      border: 2px solid #f29d12;
    }

    .buttonItem2 {
      height: 35px;
      background: #fff;
      border-radius: 18px;
      line-height: 35px;
      font-size: 16px;
      color: #333333;
      border: 2px solid #acb7bc;
    }
  }
}
</style>